---
title: Accessibility
redirect_from:
  - /components/socialbutton/accessibility/
---

## Accessibility

The SocialButton component has been designed with accessibility in mind, providing accessible social authentication buttons with proper semantic structure and screen reader support for sign-in flows.

### Accessibility Props

The following props are available to improve the accessibility of your SocialButton component:

| Name           | Type               | Description                                                                                                                                                                                                                               |
| :------------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ariaControls   | `string`           | Identifies the element controlled by the button, establishing a programmatic relationship for screen readers. Use with unique element IDs.                                                                                                |
| ariaExpanded   | `boolean`          | Indicates whether the element controlled by the button (via `ariaControls`) is expanded or collapsed. Commonly used with dropdowns, modals, or expandable content triggered by social sign-in.                                            |
| ariaLabelledby | `string`           | References the ID(s) of element(s) that provide a label for the button. The referenced elements can be hidden and their text will be announced by screen readers to describe the button.                                                  |
| title          | `string`           | Provides additional context as an `aria-label` attribute. Use when you need to add extra information for screen readers or when there are no `children` to serve as the button label. Should describe the specific social sign-in action. |
| disabled       | `boolean`          | When `true`, makes the button inactive and removes it from keyboard navigation. Screen readers will announce the button as disabled and users cannot interact with it.                                                                    |
| role           | `string`           | Specifies the ARIA role of the element. Should only be used in edge cases when rendering SocialButton as non-actionable HTML elements like `div` or `span`, though this is anti-pattern behavior.                                         |
| tabIndex       | `string \| number` | Controls the tab order of the element. Use with caution and only when necessary to modify the default focus flow.                                                                                                                         |

### Automatic Accessibility Features

- The component automatically manages HTML semantics and ARIA attributes:

  - Renders as a semantic `<button>` element by default, ensuring proper keyboard focusability and button behavior
  - Renders as a semantic `<a>` element when `href` is provided, creating a proper link that assistive technologies can identify
  - Sets `type="button"` or `type="submit"` based on the `submit` prop when rendered as a button
  - Automatically adds `rel="noopener noreferrer"` for external links when `external` prop is true
  - Properly handles the `disabled` state by preventing interaction and removing from tab order

- Focus management is handled automatically:

  - Native focus behavior is preserved based on the rendered element
  - Visible focus indicators are provided for keyboard users
  - Disabled and loading states are properly excluded from tab navigation

- Icon accessibility is managed automatically:

  - Icons are rendered with appropriate semantic structure
  - Both the social icon and the chevron forward icon are automatically hidden from screen readers with `ariaHidden` attribute
  - Icons receive proper color contrast and sizing for accessibility

- Loading state accessibility:
  - When `loading` is true, the button becomes disabled and shows a loading indicator
  - The loading spinner inherits the proper color for sufficient contrast
  - Screen readers are informed of the disabled state during loading

### Best Practices

- Use clear and specific button text that describes the social sign-in action, such as "Sign in with Google" or "Continue with Apple" rather than just "Google" or "Apple"
- Ensure the button text follows a consistent pattern across all social buttons in your application
- When using the `title` prop, provide additional context that supplements but doesn't duplicate the button text
- For social sign-in flows, consider informing users about account creation vs. existing account sign-in behavior
- Ensure sufficient color contrast between the button and its background, especially for custom styled social buttons
- When social buttons trigger modals or popups, use `ariaControls` and `ariaExpanded` to establish the relationship between the button and the controlled content
- Avoid nesting interactive elements: Do not place SocialButton inside other interactive elements like buttons or links, as this creates invalid HTML and confusing experiences for assistive technology users

### Keyboard Navigation

SocialButton components are fully navigable with keyboard:

- **When rendered as button (default):**

  - Users can focus on the button using the **Tab** key
  - Users can activate the button using both **Enter** and **Space** keys
  - When `disabled` or `loading`, the button is skipped in tab navigation

- **When rendered as link (with href):**
  - Users can focus on the link using the **Tab** key
  - Users can activate the link using the **Enter** key
  - Standard link keyboard behavior applies

On mobile devices with on-screen keyboards, standard touch interactions apply while maintaining the same keyboard accessibility patterns when an external keyboard is connected.

### Examples

#### Basic Social Sign-in Button

```jsx
<SocialButton type="google">Sign in with Google</SocialButton>
```

Screen reader announces: "Sign in with Google, button"

#### Apple Sign-in with Additional Context

```jsx
<SocialButton type="apple" title="Sign in with Apple ID to access your account">
  Continue with Apple
</SocialButton>
```

Screen reader announces: "Sign in with Apple ID to access your account, button"

#### Social Button with Modal Control

```jsx
<SocialButton
  type="facebook"
  ariaControls="social-auth-modal"
  ariaExpanded={isModalOpen}
  onClick={handleFacebookSignIn}
>
  Sign in with Facebook
</SocialButton>
```

Screen reader announces: "Sign in with Facebook, button, collapsed" (when modal is closed) or "Sign in with Facebook, button, expanded" (when modal is open).

#### External Social Authentication Link

```jsx
<SocialButton type="google" href="https://accounts.google.com/oauth/authorize?..." external>
  Sign in with Google
</SocialButton>
```

Screen reader announces: "Sign in with Google, link"

#### Loading State Social Button

```jsx
<SocialButton type="apple" loading={isAuthenticating} disabled={isAuthenticating}>
  {isAuthenticating ? "Signing in..." : "Continue with Apple"}
</SocialButton>
```

When loading, screen reader announces: "Signing in..., button, dimmed" (indicating the disabled state).
